<template>
    <div class="home">
        <div class="header">
            <van-swipe :autoplay="3000" indicator-color="#fff" class="header-swipe">
            <van-swipe-item v-for="(image, index) in imgs" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
            </van-swipe>
            <div class="header-menu">
                <van-row>
                    <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                    <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                     <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                     <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                     <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                     <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                     <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                     <van-col span="6" class="header-menu-item">
                       <a href="">
                             <img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/20983/16/10753/6124/5c8a16aaE5d6b15d7/01e0e818a7505267.png.webp"/>
                            <h2>京东超市</h2>
                       </a>
                    </van-col>
                </van-row>

            </div>
        </div>
        <div class="body">
            <van-row>
                <van-col span="12" class="good-item">
                        <a href="">
                            <img src="//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/22563/38/4606/319386/5c331b68E9d1db828/620286737f1f57fb.jpg!q70.dpg.webp" />
                        <p>红颜奶油草莓 约重1kg/30-40颗 量贩装 新鲜水果  </p>
                        <p>
                            <span class="good-price">￥109.9</span>
                            <van-button class="good-btn-buy" plain type="default" size="mini">购买</van-button>
                        </p>
                        </a>
                </van-col>
                <van-col span="12" class="good-item">
                        <a href="">
                            <img src="//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/22563/38/4606/319386/5c331b68E9d1db828/620286737f1f57fb.jpg!q70.dpg.webp" />
                        <p>红颜奶油草莓 约重1kg/30-40颗 量贩装 新鲜水果  </p>
                        <p>
                            <span class="good-price">￥109.9</span>
                            <van-button class="good-btn-buy" plain type="default" size="mini">购买</van-button>
                        </p>
                        </a>
                </van-col>
                <van-col span="12" class="good-item">
                        <a href="">
                            <img src="//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/22563/38/4606/319386/5c331b68E9d1db828/620286737f1f57fb.jpg!q70.dpg.webp" />
                        <p>红颜奶油草莓 约重1kg/30-40颗 量贩装 新鲜水果  </p>
                        <p>
                            <span class="good-price">￥109.9</span>
                            <van-button class="good-btn-buy" plain type="default" size="mini">购买</van-button>
                        </p>
                        </a>
                </van-col>
                <van-col span="12" class="good-item">
                        <a href="">
                            <img src="//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/22563/38/4606/319386/5c331b68E9d1db828/620286737f1f57fb.jpg!q70.dpg.webp" />
                        <p>红颜奶油草莓 约重1kg/30-40颗 量贩装 新鲜水果  </p>
                        <p>
                            <span class="good-price">￥109.9</span>
                            <van-button class="good-btn-buy" plain type="default" size="mini">购买</van-button>
                        </p>
                        </a>
                </van-col>
                <van-col span="12" class="good-item">
                        <a href="">
                            <img src="//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/22563/38/4606/319386/5c331b68E9d1db828/620286737f1f57fb.jpg!q70.dpg.webp" />
                        <p>红颜奶油草莓 约重1kg/30-40颗 量贩装 新鲜水果  </p>
                        <p>
                            <span class="good-price">￥109.9</span>
                            <van-button class="good-btn-buy" plain type="default" size="mini">购买</van-button>
                        </p>
                        </a>
                </van-col>
                <van-col span="12" class="good-item">
                        <a href="">
                            <img src="//img10.360buyimg.com/mobilecms/s372x372_jfs/t1/22563/38/4606/319386/5c331b68E9d1db828/620286737f1f57fb.jpg!q70.dpg.webp" />
                        <p>红颜奶油草莓 约重1kg/30-40颗 量贩装 新鲜水果  </p>
                        <p>
                            <span class="good-price">￥109.9</span>
                            <van-button class="good-btn-buy" plain type="default" size="mini">购买</van-button>
                        </p>
                        </a>
                </van-col>
            </van-row>

        </div>

        <van-tabbar v-model="active">
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/list" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
        active:0,
      imgs: [
        "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/82463/25/14802/101106/5dc226f7E0cf5aec1/c5354d8de017b16c.jpg!cr_1125x445_0_171!q70.jpg.dpg",
        "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/10798/34/12141/189137/5c7668a1Eef6e08ec/1b7434cc17f6306d.jpg!cr_1125x445_0_171!q70.jpg.dpg",
        "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/106461/13/6197/101663/5df1a9a1E02839499/e1b8d1258add1e7f.jpg!cr_1125x445_0_171!q70.jpg.dpg"
      ]
    };
  }
};
</script>
<style lang="less" scoped>
//less
</style>
